<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    :z-index="1000"
    @close="onClose"
  >
    <TaskTitle icon-name="Edit" title-name="编辑潜客 - 基本信息" color="blue" />
    <div v-if="getFormData && formData.code" class="list-container">
      <p-tabs
        :animated="false"
        class="tabs-container"
        default-active-key="1"
        @change="tabsChange"
      >
        <p-tab-pane key="1" tab="基本信息">
          <div class="list-main">
            <CustomerBasicInfo
              ref="BasicInfoForm"
              :key-tabs="keyTabs"
              :code="formData.code"
              :form-info="formData"
              :is-edit="false"
              :show-btn="true"
            />
            <BottomLine />
          </div>
        </p-tab-pane>
        <p-tab-pane key="2" tab="业务线">
          <TableBusinessLine
            ref="businessLines"
            :key-tabs="keyTabs"
            :code="formData.code"
            :show-btn="true"
            @change="closeCallback"
          />
        </p-tab-pane>
        <p-tab-pane key="3" tab="联系人">
          <TabsContacts
            :code="formData.code"
            :key-tabs="keyTabs"
            :show-btn="true"
            :name="formData.name"
            :show-create="true"
          />
        </p-tab-pane>
        <p-tab-pane key="4" tab="地址">
          <TabsAddress
            :code="formData.code"
            :key-tabs="keyTabs"
            :show-btn="true"
          />
        </p-tab-pane>
        <p-tab-pane key="5" tab="法人">
          <TabsLegalPerson
            :code="formData.code"
            :form-info="formData"
            :key-tabs="keyTabs"
            :show-btn="true"
          />
        </p-tab-pane>
        <p-tab-pane key="6" tab="附件">
          <TabsEnclosure
            :code="formData.code"
            :key-tabs="keyTabs"
            :show-btn="true"
          />
        </p-tab-pane>
        <p-tab-pane key="7" tab="操作日志">
          <ProgressPortrait :operation-log="formData.logs" />
        </p-tab-pane>
      </p-tabs>
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import {
  getCustomerMainDetail,
  postSaveCustomerFormal,
  postInspectionMainRepeat
} from '@/api/customerMaintain.js';
import DrawerMixin from './mixin';
import CustomerBasicInfo from '@/components/task/CustomerBasicInfo.vue';
import TableBusinessLine from '@/components/task/TableBusinessLine.vue';
import TabsEnclosure from './TabsEnclosure.vue';
import TabsAddress from './TabsAddress.vue';
import TabsLegalPerson from './TabsLegalPerson.vue';
import TabsContacts from './TabsContacts.vue';
import ProgressPortrait from '@/components/task/ProgressPortrait.vue'

export default {
  components: {
    CustomerBasicInfo,
    TableBusinessLine,
    TabsEnclosure,
    TabsAddress,
    TabsLegalPerson,
    TabsContacts,
    ProgressPortrait
  },
  mixins: [DrawerMixin],
  props: {
    priceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showBottom: true,
      formData: {},
      keyTabs: '1',
      disabled: false,
    };
  },

  computed: {
    getFormData() {
      return Object.keys(this.formData).length || 0;
    },
    footerButtons() {
      let disabled = this.keyTabs !== '1' && this.keyTabs !== '2';
      if (this.getFormData) {
        return [
          {
            key: 'save',
            type: 'primary',
            label: '保存',
            auth: true,
            disabled: disabled,
          },
          {
            key: 'close',
            label: '返回',
          },
        ];
      } else {
        return [
          {
            key: 'close',
            label: '返回',
          },
        ];
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.init();
        }
      },
      immediate: true,
    },
    keyTabs: {
      handler(newVal) {
        if (newVal === '1' || newVal === '7') {
          this.init();
        }
        // newVal === '1' && this.init();
      },
      immediate: true,
    },
  },
  created() {
    // this.init()
  },
  methods: {
    init() {
      if (!this.priceId) return;
      this.getbusinessFormInfo();
    },
    async getbusinessFormInfo() {
      const res = await getCustomerMainDetail(this.priceId);
      this.formData = res?.data?.data || {};
    },
    async tabsChange(key) {
      this.keyTabs = key;
      console.log(key);
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    async checkData() {},
    async submitData(data) {
      const valid = await this.$refs.BasicInfoForm.validate();

      if (!valid) return new Promise(() => {});
      if (valid) {

        return await postSaveCustomerFormal({
          ...data,
          salesGroupCode: data.salesGroupCode?.join(','),
          pmGroupCode: data.pmGroupCode?.join(','),
        });
      }
    },
    // 保存
    async saveCallback() {
      console.log(this.keyTabs, 'key');
      if (this.keyTabs === '2') {
        this.$refs.businessLines.saveCallback();
        return;
      }
      const data = this.$refs.BasicInfoForm.form;
      const address = this.$refs.BasicInfoForm.rulesAddress;
      const remark = this.$refs.BasicInfoForm.rulesRemark;
      const rulesWebsite = this.$refs.BasicInfoForm.rulesWebsite;
      let resCustomerName = await postInspectionMainRepeat({
        customerName: data.customerName,
        id: this.formData.id,
      });
      let resName = await postInspectionMainRepeat({
        name: data.name,
        id: this.formData.id,
      });
      let customerName = resCustomerName?.data?.data;
      let name = resName?.data?.data;
      if (data.customerName && !customerName) {
        this.$message.error('该客户名称已被占用');
        return;
      }
      if (data.name && !name) {
        this.$message.error('该客户简称已被占用');
        return;
      }

      if (address) {
        this.$message.error('详细地址输入内容过长');
        return;
      }
      if (rulesWebsite) {
        this.$message.error('网站地址输入内容过长');
        return;
      }
      if (remark) {
        this.$message.error('备注输入内容过长');
        return;
      }
      const result = await this.submitData(data, '1');
      if (result?.data?.data) {
        this.$message.success('保存成功！');
      }
      this.closeCallback();
    },
    // 返回
    closeCallback() {
      this.keyTabs = '1';
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
}
.list-main {
  height: calc(100% - 400px);
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
}
/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tabs-container {
  height: 100% !important;
  overflow-y: scroll;
}
</style>
